<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title>Solar System</title>
	<link rel="stylesheet" type="text/css" href="styles.css"/>
	<script type="text/javascript" src="js/lib/dateExt.js"></script>
	<script type="text/javascript" src="js/lib/html.js"></script>
	<script type="text/javascript" src="js/lib/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/lib/raphael-min.js"></script>
	<script type="text/javascript" src="js/solarSystem.js"></script>
	<script type="text/javascript">
		function buildPlanetBoxes(){with(Html){
			var planets = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"];
			$("#planetBoxes").html(markup(
				apply(planets, function(pln){
					return div(
						span(pln),
						input({type:"checkbox", value:pln, checked:true})
					);
				}),
				div(
					span("satellites"),
					input({type:"checkbox", value:"satellites"})
				)
			));
			
			$("#planetBoxes input").click(function(){var _=$(this);
				var planets = {};
				$("#planetBoxes input").each(function(i, inp){inp = $(inp);
					if(inp.attr("checked")) planets[inp.val()] = true;
				});
				$("#solar").solarSystem({displayPlanets:planets});
			});
		}}
		
		$(function(){
			buildPlanetBoxes();
			
			$("#date").val(DateExt.format.shortDigits.toString(new Date()))
				.change(function(){
					try{
						$("#solar").solarSystem({today: DateExt.format.shortDigits.parse($("#date").val())});
					}
					catch(e){}
				});
			$("#viewType").change(function(){
				$("#solar").solarSystem({viewType:$("#viewType").val()});
			});
			
			$("#solar").solarSystem({
				w:600, h:550, 
				color:{back:"#004", fore:"#ccf"},
				viewType: $("#viewType").val()
			});
		});
	</script>
</head>
<body>
	<h1>Solar System</h1>
	<div id="solar"></div>
	Date: <input type="text" id="date"/>
	View:
	<select id="viewType">
		<option value="reg" selected>regular</option>
		<option value="log">logarithmic</option>
		<option value="prop">proportional</option>
	</select>
	<div id="planetBoxes"></div>
	<p><a href="http://aki-net.narod.ru/kb/Astronomy/">More astronomy</a></p>
	<p><a href="http://www.solarsystemscope.com/">Advanced Solar System Model</a></p>
</body>
</html>